<template>
	<view class="page-container">
		
		<view class="table-view-group">
			<view class="table-cell-block" v-for="(item, index) in messageList" :key="index" @click="jumpDetail(item)">
				<view class="table-cell-block__hd">
					<view class="notice">
						<text class="point" v-if="item.status == 0"></text>
						<text class="iconfont">&#xe68f;</text>
					</view>
				</view>
				<view class="table-cell-block__bd">
					<view class="title">{{item.content}}</view>
					<view class="date">{{getDateFormat(item.addtime)}}</view>
					<text class="iconfont">&#xe67f;</text>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="more" v-if="messageList.length"></uni-load-more>
		
		<st-empty-msg noMsg="暂无消息记录" :showHande="false" v-if="!messageList.length"></st-empty-msg>
		
	</view>
</template>

<script>
	var page = 1,
		pagesize = 10;
	import stEmpptyMsg from '@/components/st-empty-msg/st-empty-msg.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import {get_date_format} from '@/utils/utils.js'
	import {getOrderDetailPage} from "@/utils/toPath.js"
	export default {
		components:{
			stEmpptyMsg,
			uniLoadMore
		},
		data() {
			return {
				messageList: [],
				more: 'noMore'
			}
		},
		onLoad() {
			page = 1;
			this.getMessageList()
		},
		onReachBottom() {
			this.getMessageList()
		},
		methods: {
			
			// 获取消息
			async getMessageList(){
				let params, msgRes;
				params = {
					method: "api/v2/member/message/list",
					page,
					pagesize
				}
				msgRes = await this.$http(params);
				this.more = 'loading'
				if(msgRes.status){
					this.messageList = [...this.messageList, ...msgRes.data.list];
					if(msgRes.data.list.length < pagesize){
						this.more = 'noMore'
					}
					page++
				}else{
					uni.showToast({
						title: msgRes.msg,
						icon: "none"
					})
				}
			},
			
			// 标记已读
			async setRead(item){
				let params, readRes;
				params = {
					method: "api/v2/member/message/viewed",
					id: item.id
				}
				readRes = await this.$http(params);
				if(readRes.status){
					this.$set(item, 'status', '1');
					if(item.order_id>0){
						let url = getOrderDetailPage(item.product_type_id,{
							orderid : item.order_id,
							typeid:item.product_type_id
						});
						if(url){
							uni.navigateTo({
								url: url
							})
						}
					}
				}else{
					uni.showToast({
						title: readRes.msg,
						icon: "none"
					})
				}
			},
			
			// 跳转消息详情
			jumpDetail(item){
				let type, id, productId;
				type = item.type;
				id = item.id;
				productId = item.product_id;
				if(type < 100){
					
				}else if(99 > type > 200){
					
				}else if(199 > type > 300){
					
				}
				this.setRead(item)
			},
			
			//转换日期格式 
			getDateFormat(time){
				return get_date_format(time,'yyyy-MM-dd hh:mm:ss');
			},
		}
	}
</script>

<style lang="scss">
	.table-view-group{
		margin-bottom: 20rpx;
		background-color: $uni-bg-color;
	}
	.table-cell-block{
		@extend .justifyspacec;
		padding: 24rpx;
		position: relative;
		&:after{
			content: "";
			position: absolute;
			right: 24rpx;
			left: 24rpx;
			bottom: 0;
			height: 1px;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: $uni-border-color;
		}
		&:last-child:after{
			display: none;
		}
		&__hd{
			flex: 0 0 auto;
			.notice{
				position: relative;
				.point{
					display: inline-block;
					width: 12rpx;
					height: 12rpx;
					position: absolute;
					top: -8rpx;
					right: -8rpx;
					border-radius: $uni-border-radius-circle;
					background-color: #fc4825;
				}
				.iconfont{
					color: $uni-color-primary;
					font-size: 44rpx;
				}
			}
		}
		&__bd{
			width: 664rpx;
			padding: 0 60rpx 0 24rpx;
			position: relative;
			.title{
				font-size: $uni-font-size-base;
				word-break: break-all;
			}
			.date{
				color: $uni-text-color-grey;
				margin-top: 12rpx;
				font-size: $uni-font-size-sm;
			}
			.iconfont{
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
			}
		}
	}
</style>
